<template>
	<view>
		<view class="roll">
			<view class="roll_con">
				 <view v-for="(item, index) in list" :key="index" :animation="animationData">
				 	<view class="swiper-item">
				 		<view class="customerInfo">{{ item.customerPhone }}</view>
				 		<view class="customerInfo">{{ item.prize }}</view>
				 	</view>
				 </view>
			</view>
			
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array
		}
	},
	data() {
		return {
			scrollHeight: 0, //向上滚动距离
			height: 120, //.lis高度（滚动框高度）
			animationData: {}, //动画对象
			timer:null
		};
	},
	components: {},
	// onReady() {
	// 	let animation = uni.createAnimation({
	// 		transformOrigin:"50% 50%",
	// 		duration:1000,
	// 		timingFunction:"linear",
	// 		delay:0
	// 	})
	// 	this.animation = animation;
	// 	this.animations();
	// },
	mounted() {
		this.prizeScroll();
	},
	methods: {
		// animations() {
		// 	let i = -1;
		// 	let j = 0;
		// 	let sum = this.list.length;
		// 	setInterval(()=> {
		// 		if (i == sum) {
		// 			i = 0;
		// 		}
		// 		setTimeout(()=> {
		// 			let arr = this.list.splice(i, 0)[0];
		// 			this.list.push(arr);
		// 			this.list.splice(i, 0, arr);
		// 		}, 500)
		// 		i++;
		// 		j++;
		// 		this.animation.translateY(-24 * j).step()6
		// 		this.animationData = this.animation.export();
				
		// 	},1000)
		// }
		
		
		getHeight(Class) {
			let query = uni.createSelectorQuery().in(this);
			query
				.selectAll(Class)
				.boundingClientRect(data => {
					this.height = 120;
				})
				.exec();
		},
		prizeScroll() {
			let speed = 50;
			let animation = uni.createAnimation({
				duration: this.getHeight('.lis') / speed,
				timingFunction: 'linear',
				delay: 0
			});
			this.animation = animation;
			this.timer = setInterval(() => {
				if (this.scrollHeight >= this.height) {
					animation.translateY(0).step();
					this.scrollHeight = 0;
					this.animationData = animation.export();
				} else {
					this.scrollHeight = this.scrollHeight + 1;
					animation.translateY(-this.scrollHeight).step();
					this.animationData = animation.export();
				}
			}, speed);
		}
	},
	beforeDestroy() {
		if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
			clearInterval(this.timer); //关闭
		}
	}
	
};
</script>

<style>
	.roll {
		padding: 20upx;
	}
	.roll_con {
		height: 160px;
		overflow: hidden;
	}
	.swiper-item {
		display: flex;
		justify-content: space-between;
	}
	.customerInfo {
		color: #333;
		font-size: 26upx;
		margin-top: 10upx;
	}
</style>
